<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description"
          content="Probably the most complete UI kit out there. Multiple functionalities and controls added,  extended color palette and beautiful typography, designed as its own extended version of Bootstrap at  the highest level of quality.                             ">
    <meta name="author" content="Webpixels">
    <title>Boomerang UI Kit - Free Bootstrap Framework by Webpixels</title>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800|Roboto:400,500,700" rel="stylesheet">
    <!-- Theme CSS -->
    <link type="text/css" href="./assets/css/theme.css" rel="stylesheet">
    <!-- Demo CSS - No need to use these in your project -->
    <link type="text/css" href="./assets/css/demo.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-transparent navbar-dark bg-dark py-4">
    <div class="container">
        <a class="navbar-brand" href="./"><strong>Oj-System</strong> zxj2022</a>
        <button class="navbar-toggler" type="button" data-action="offcanvas-open" data-target="#navbar_main" aria-controls="navbar_main" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse offcanvas-collapse" id="navbar_main">
            <ul class="navbar-nav ml-auto align-items-lg-center">
                <h6 class="dropdown-header font-weight-600 d-lg-none px-0">Menu</h6>


                <li class="nav-item">
                    <a href="https://gitee.com"  class="btn btn-sm bg-white d-none d-lg-inline-flex">代码获取</a>
                </li>

            </ul>
        </div>
    </div>
</nav>
<main class="main">
    <!--      大屏幕演示-->
    <section class="spotlight parallax bg-cover bg-size--cover" data-spotlight="fullscreen"
             style="background-image: url('assets/images/backgrounds/img-1.jpg')">
        <span class="mask bg-primary alpha-7"></span>
        <div class="spotlight-holder py-lg pt-lg-xl">
            <div class="container d-flex align-items-center no-padding">
                <div class="col">
                    <div class="row cols-xs-space align-items-center text-center text-md-left justify-content-center">
                        <div class="col-7">
                            <div class="text-center mt-5">
                                <img src="assets/images/brand/icon.png" style="width: 200px;" class="img-fluid animated"
                                     data-animation-in="jackInTheBox" data-animation-delay="1000">
                                <h2 class="heading display-4 font-weight-400 text-white mt-5 animated"
                                    data-animation-in="fadeInUp" data-animation-delay="2000">
                                    <span class="font-weight-700">Oj-System</span> zxj2022
                                </h2>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="slice slice-lg">
        <h3>题目列表</h3>
        <table class="table table-striped" id="tables">
            <thead>
            <tr>
                <th scope="col">序号</th>
                <th scope="col">题目</th>
                <th scope="col">难度</th>
            </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </section>
</main>
<!-- Core -->
<script src="./assets/vendor/jquery/jquery.min.js"></script>
<script src="./assets/vendor/popper/popper.min.js"></script>
<script src="./assets/js/bootstrap/bootstrap.min.js"></script>
<!-- FontAwesome 5 -->
<!--    <script src="./assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>-->
<!-- Page plugins -->
<script src="./assets/vendor/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="./assets/vendor/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
<script src="./assets/vendor/input-mask/input-mask.min.js"></script>
<script src="./assets/vendor/nouislider/js/nouislider.min.js"></script>
<script src="./assets/vendor/textarea-autosize/textarea-autosize.min.js"></script>
<!-- Theme JS -->
<script src="./assets/js/theme.js"></script>

<script>
    // 在页面加载的时候, 尝试从服务器获取题目列表. 通过 ajax 的方式来进行获取, 并且把获取到的数据展示到页面上
    function getProblems() {
        $.ajax({
            url: "problem/selectAllProblems",
            type: "get",
            success: function (data) {
                console.log(data);
                /*
                利用data 构造表格
*               <tr>
                    <th scope="row">1</th>
                    <td ><a href="./problem_detail.html?problemId=1">两数相加</a></td>
                    <td>简单</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td><a href="./problem_detail.html?problemId=2">链表逆序</a></td>
                    <td>中等</td>
                </tr>
                * */
                for (var i = 0; i < data.length; i++) {
                    var problem = data[i];
                    var tr = $("<tr></tr>");
                    var td1 = $("<td></td>").text(problem.problemId);
                    var td2 = $("<td></td>");
                    var a = $("<a></a>").attr("href", "./problem_detail.html?problemId=" + problem.problemId).text(problem.title);
                    td2.append(a);
                    var td3 = $("<td></td>").text(problem.level);
                    tr.append(td1);
                    tr.append(td2);
                    tr.append(td3);
                    $("#tables tbody").append(tr);
                }
            }
        });
    }

    getProblems();
</script>
</body>
</html>
